﻿@model CustomerInfoModel
@inject CustomerSettings customerSettings
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_TwoColumns";

    //title
    pagebuilder.AddTitleParts(Loc["Title.Account"]);
}

@section left
{
    @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.Info })
}

@if (Model.CountryEnabled && Model.StateProvinceEnabled)
{
    <script asp-location="Footer" asp-order="300">
            function @Html.IdFor(model => model.CountryId)_select_element(e) {
                var selectedItem = e.value;
                var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
                axios({
                    method: 'get',
                    url: "@(Url.RouteUrl("GetStatesByCountryId"))",
                    params: { "countryId": selectedItem, "addSelectStateItem": "true" },
                }).then(function (response) {
                    ddlStates.innerHTML = '';
                    response.data.forEach(function (id, option) {
                        elChild = document.createElement('option');
                        elChild.setAttribute('value', id.id);
                        elChild.innerHTML = id.name;
                        ddlStates.appendChild(elChild);
                    });
                    customer.StateProvinceId = response.data[0].id;
                }).then(function () {
                    ddlStates.classList.remove('is-valid');
                    ddlStates.classList.add('is-invalid');
                }).catch(function (error) {
                    alert(error);
                });
            }
        function @Html.IdFor(model => model.StateProvinceId)_select_element(e) {
            var ddlStates = document.getElementById("@Html.IdFor(model => model.StateProvinceId)");
            if (e.selectedIndex > 0) {
                ddlStates.classList.remove('is-invalid');
                ddlStates.classList.add('is-valid');
            } else {
                ddlStates.classList.remove('is-valid');
                ddlStates.classList.add('is-invalid');
            }
        }
    </script>
}
<script asp-location="Footer">
    function toggleNewsletterCat() {
                var element = document.getElementById('@Html.IdFor(model => model.Newsletter)');
                if (element) {
                    if (document.getElementById('@Html.IdFor(model => model.Newsletter)').checked) {
                        if (document.querySelector('.register-category-newsletter')) {
                            document.querySelector('.register-category-newsletter').style.display = "block";
                        }
                    }
                    else {
                        if (document.querySelector('.register-category-newsletter')) {
                            document.querySelector('.register-category-newsletter').style.display = "none";
                        }
                    }
                }
    }
    document.addEventListener("DOMContentLoaded", function () {
        toggleNewsletterCat();
    });
</script>
<div class="page account-page customer-info-page pl-lg-3 pt-3 pt-lg-0">
@if (customerSettings.AllowUsersToExportData)
{
    <button class="btn btn-info float-sm-right mt-2" onclick="location.href='/account/export'">
        <b-icon icon="server"></b-icon> @Loc["Account.CustomerExportToXls"]
    </button>
}
<h2 class="generalTitle">
    <div>@Loc["Account.CustomerInfo"]</div>
</h2>
<a class="left-side-toggler mb-3" onclick="sideToggle()">
    <div class="inner">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="text">
        @Loc["Account.Navigation"]
    </div>
</a>
<validation-observer v-slot="{ handleSubmit }">
<form asp-route="CustomerInfo" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
<div asp-validation-summary="All" class="message-error"></div>
<div class="card mb-3">
    <h3 class="card-header">@Loc["Account.YourPersonalDetails"]</h3>
    <div class="card-body">
        <fieldset class="form-fields">
            <legend class="sr-only">@Loc["Account.Fields.Gender"]</legend>
            @if (Model.GenderEnabled)
            {
                <label class="col-form-label">
                    @Loc["Account.Fields.Gender"]:
                </label>
                <div class="form-group gender">
                    <div class="flex-row">
                        <div class="custom-control custom-radio male custom-control-inline">
                            <input type="radio" asp-for="Gender" value="M" checked="@(Model.Gender == "M")" id="gender-male" class="custom-control-input"/>
                            <label class="custom-control-label" for="gender-male">@Loc["Account.Fields.Gender.Male"]</label>
                        </div>
                        <div class="custom-control custom-radio female custom-control-inline">
                            <input type="radio" asp-for="Gender" value="F" checked="@(Model.Gender == "F")" id="gender-female" class="custom-control-input"/>
                            <label class="custom-control-label" for="gender-female">@Loc["Account.Fields.Gender.Female"]</label>
                        </div>
                    </div>
                </div>
            }
        </fieldset>
        <div class="form-row">
            <fieldset class="form-group col-sm-6 col-12">
                <legend class="sr-only">@Loc["account.fields.firstname"]</legend>
                @if (Model.FirstLastNameRequired)
                {
                    <validation-provider tag="div" rules="required" name="FirstName" v-slot="{ errors, classes }">
                        <label asp-for="FirstName" class="col-form-label">@Loc["Account.Fields.FirstName"]:</label>
                        <span class="required">*</span>
                        <input asp-for="FirstName" v-model="customer.FirstName" v-bind:class="[classes , 'form-control']"/>
                        <span class="field-validation-error">{{ errors[0] }}</span>
                        <span asp-validation-for="FirstName"></span>
                    </validation-provider>
                }
                else
                {
                    <label asp-for="FirstName" class="col-form-label">@Loc["Account.Fields.FirstName"]:</label>
                    <input asp-for="FirstName" class="form-control"/>
                }
            </fieldset>
            <fieldset class="form-group col-sm-6 col-12">
                <legend class="sr-only">@Loc["account.fields.lastname"]</legend>
                @if (Model.FirstLastNameRequired)
                {
                    <validation-provider tag="div" rules="required" name="LastName" v-slot="{ errors, classes }">
                        <label asp-for="LastName" class="col-form-label">@Loc["Account.Fields.LastName"]:</label>
                        <span class="required">*</span>
                        <input asp-for="LastName" v-model="customer.LastName" v-bind:class="[classes , 'form-control']"/>
                        <span class="field-validation-error">{{ errors[0] }}</span>
                        <span asp-validation-for="LastName"></span>
                    </validation-provider>
                }
                else
                {
                    <label asp-for="LastName" class="col-form-label">@Loc["Account.Fields.LastName"]:</label>
                    <input asp-for="LastName" class="form-control"/>
                }
            </fieldset>
        </div>
        @if (Model.DateOfBirthEnabled)
        {
            <fieldset class="form-group date-of-birth">
                <legend class="sr-only">@Loc["account.fields.dateofbirth"]</legend>
                <span class="col-form-label">
                    @Loc["Account.Fields.DateOfBirth"]:
                </span>
                @if (Model.DateOfBirthRequired)
                {
                    <span class="required">*</span>
                }
                <div class="input-group">
                    <date-picker-dropdown control-day="@Html.IdFor(x => x.DateOfBirthDay)"
                                          control-month="@Html.IdFor(x => x.DateOfBirthMonth)"
                                          control-year="@Html.IdFor(x => x.DateOfBirthYear)"
                                          begin-year="@(DateTime.Now.Year - 100)"
                                          end-year="DateTime.Now.Year"
                                          selected-day="Model.DateOfBirthDay ?? 0"
                                          selected-month="Model.DateOfBirthMonth ?? 0"
                                          selected-year="Model.DateOfBirthYear ?? 0"
                                          class="col-12 input-group px-0"/>

                    <span asp-validation-for="DateOfBirthDay"></span>
                    <span asp-validation-for="DateOfBirthMonth"></span>
                    <span asp-validation-for="DateOfBirthYear"></span>
                </div>
            </fieldset>
        }
        <fieldset class="form-group row mail">
            <legend class="sr-only">@Loc["account.associatedexternalauth.email"]</legend>
            <div class="col-12">
                <validation-provider tag="div" rules="required|email" name="Email" v-slot="{ errors, classes }">
                    <label asp-for="Email" class="col-form-label">@Loc["Account.Fields.Email"]:</label>
                    <span class="required">*</span>
                    <input asp-for="Email" v-model="customer.Email" v-bind:class="[classes , 'form-control']" asp-readonly="@(!Model.AllowUsersToChangeEmail)"/>
                    <span class="field-validation-error">{{ errors[0] }}</span>
                    <span asp-validation-for="Email"></span>
                </validation-provider>
            </div>
        </fieldset>
        @if (Model.UsernamesEnabled)
        {
            if (Model.AllowUsersToChangeUsernames)
            {
                <fieldset class="form-group row mb-0">
                    <legend class="sr-only">@Loc["account.associatedexternalauth.email"]</legend>
                    <div class="col-12">
                        <validation-provider tag="div" rules="required" name="Username" v-slot="{ errors, classes }">
                            <label asp-for="Username" class="col-form-label">@Loc["Account.Fields.Username"]:</label>
                            <span class="required">*</span>
                            <input asp-for="Username" v-model="customer.Username" v-bind:class="[classes , 'form-control']"/>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="Username"></span>
                        </validation-provider>
                        @if (Model.CheckUsernameAvailabilityEnabled)
                        {
                            <partial name="Partials/CheckUsernameAvailability"/>
                        }
                    </div>
                </fieldset>
            }
            else
            {
                <fieldset class="form-group row mb-0">
                    <legend class="sr-only">@Loc["account.fields.username"]</legend>
                    <div class="form-group">
                        <label asp-for="Username" class="col-form-label px-3">@Loc["Account.Fields.Username"]:</label>
                        <span class="readonly-username px-3">@Model.Username</span>
                    </div>
                </fieldset>
            }
        }
    </div>
</div>
@if (Model.CompanyEnabled || Model.DisplayVatNumber)
{
    <div class="card mb-3">
        <h3 class="card-header">@Loc["Account.CompanyDetails"]</h3>
        <div class="card-body">
            <div class="form-fields">
                @if (Model.CompanyEnabled)
                {
                    <div class="form-group">
                        @if (Model.CompanyRequired)
                        {
                            <validation-provider tag="div" rules="required" name="Company" v-slot="{ errors, classes }">
                                <label asp-for="Company" class="col-form-label">@Loc["Account.Fields.Company"]:</label>
                                <span class="required">*</span>
                                <input asp-for="Company" v-model="customer.Company" v-bind:class="[classes , 'form-control']"/>
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="Company"></span>
                            </validation-provider>
                        }
                        else
                        {
                            <label asp-for="Company" class="col-form-label">@Loc["Account.Fields.Company"]:</label>
                            <input asp-for="Company" class="form-control"/>
                            <span asp-validation-for="Company"></span>
                        }
                    </div>
                }
                @if (Model.DisplayVatNumber)
                {
                    <div class="form-group">
                        <label asp-for="VatNumber" class="col-form-label">@Loc["Account.Fields.VatNumber"]:</label>
                        <input asp-for="VatNumber" class="form-control"/>
                        <span class="vat-status">@Model.VatNumberStatusNote</span>
                        <span class="vat-note">
                            <em>@Loc["Account.Fields.VatNumber.Note"]</em>
                        </span>
                    </div>
                }
            </div>
        </div>
    </div>
}
@if (Model.StreetAddressEnabled ||
     Model.StreetAddress2Enabled ||
     Model.ZipPostalCodeEnabled ||
     Model.CityEnabled ||
     Model.CountryEnabled)
{
    <div class="card mb-3">
        <h3 class="card-header">
            @Loc["Account.YourAddress"]
        </h3>
        <div class="card-body">
            <div class="form-fields">
                <div class="row d-flex">
                    @if (Model.StreetAddressEnabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.streetaddress"]</legend>
                            @if (Model.StreetAddressRequired)
                            {
                                <validation-provider tag="div" rules="required" name="StreetAddress" v-slot="{ errors, classes }">
                                    <label asp-for="StreetAddress" class="col-form-label">@Loc["Account.Fields.StreetAddress"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="StreetAddress" v-model="customer.StreetAddress" v-bind:class="[classes , 'form-control']"/>
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="StreetAddress"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="StreetAddress" class="col-form-label">@Loc["Account.Fields.StreetAddress"]:</label>
                                <input asp-for="StreetAddress" class="form-control"/>
                                <span asp-validation-for="StreetAddress"></span>
                            }
                        </fieldset>
                    }
                    @if (Model.StreetAddress2Enabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.streetaddress2"]</legend>
                            @if (Model.StreetAddress2Required)
                            {
                                <validation-provider tag="div" rules="required" name="StreetAddress2" v-slot="{ errors, classes }">
                                    <label asp-for="StreetAddress2" class="col-form-label">@Loc["Account.Fields.StreetAddress2"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="StreetAddress2" v-model="customer.StreetAddress2" v-bind:class="[classes , 'form-control']"/>
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="StreetAddress2"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="StreetAddress2" class="col-form-label">@Loc["Account.Fields.StreetAddress2"]:</label>
                                <input asp-for="StreetAddress2" class="form-control"/>
                                <span asp-validation-for="StreetAddress2"></span>
                            }
                        </fieldset>
                    }
                    @if (Model.ZipPostalCodeEnabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.zippostalcode"]</legend>
                            @if (Model.ZipPostalCodeRequired)
                            {
                                <validation-provider tag="div" rules="required" name="ZipPostalCode" v-slot="{ errors, classes }">
                                    <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Account.Fields.ZipPostalCode"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="ZipPostalCode" v-model="customer.ZipPostalCode" v-bind:class="[classes , 'form-control']"/>
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="ZipPostalCode"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="ZipPostalCode" class="col-form-label">@Loc["Account.Fields.ZipPostalCode"]:</label>
                                <input asp-for="ZipPostalCode" class="form-control"/>
                                <span asp-validation-for="ZipPostalCode"></span>
                            }
                        </fieldset>
                    }
                    @if (Model.CityEnabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.city"]</legend>
                            @if (Model.CityRequired)
                            {
                                <validation-provider tag="div" rules="required" name="City" v-slot="{ errors, classes }">
                                    <label asp-for="City" class="col-form-label">@Loc["Account.Fields.City"]:</label>
                                    <span class="required">*</span>
                                    <input asp-for="City" v-model="customer.City" v-bind:class="[classes , 'form-control']"/>
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="City"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="City" class="col-form-label">@Loc["Account.Fields.City"]:</label>
                                <input asp-for="City" class="form-control"/>
                                <span asp-validation-for="City"></span>
                            }
                        </fieldset>
                    }
                    @if (Model.CountryEnabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.country"]</legend>
                            @if (Model.CountryRequired)
                            {
                                <validation-provider tag="div" rules="required" name="CountryId" v-slot="{ errors, classes }">
                                    <label asp-for="CountryId" class="col-form-label">@Loc["Account.Fields.Country"]:</label>
                                    <span class="required">*</span>
                                    <select asp-for="CountryId" asp-items="Model.AvailableCountries"
                                            onchange="@Html.IdFor(model => model.CountryId)_select_element(this)" v-bind:class="[classes , 'form-control custom-select']" v-model="customer.CountryId">
                                    </select>
                                    <span class="field-validation-error">{{ errors[0] }}</span>
                                    <span asp-validation-for="CountryId"></span>
                                </validation-provider>
                            }
                            else
                            {
                                <label asp-for="CountryId" class="col-form-label">@Loc["Account.Fields.Country"]:</label>
                                <select asp-for="CountryId" class="custom-select form-control" asp-items="Model.AvailableCountries"></select>
                                <span asp-validation-for="CountryId"></span>
                            }
                        </fieldset>
                    }
                    @if (Model.CountryEnabled && Model.StateProvinceEnabled)
                    {
                        <fieldset class="form-group col-12 col-sm-6">
                            <legend class="sr-only">@Loc["account.fields.stateprovince"]</legend>
                            <validation-provider tag="div" rules="required" name="StateProvinceId" v-slot="{ errors, classes }">
                                <label asp-for="StateProvinceId" class="col-form-label">@Loc["Account.Fields.StateProvince"]:</label>
                                @if (Model.StateProvinceRequired)
                                {
                                    <span class="required">*</span>
                                }
                                <select asp-for="StateProvinceId" data-val-required="@Loc["Address.Fields.StateProvince.Required"]" class="custom-select form-control"
                                        onchange="@Html.IdFor(model => model.StateProvinceId)_select_element(this)" asp-items="Model.AvailableStates" v-model="customer.StateProvinceId">
                                </select>
                                <span class="field-validation-error">{{ errors[0] }}</span>
                                <span asp-validation-for="StateProvinceId"></span>
                                <span id="states-loading-progress" style="display: none;" class="please-wait">@Loc["Common.Wait..."]</span>
                            </validation-provider>
                        </fieldset>
                    }
                </div>

            </div>
        </div>
    </div>
}
@if (Model.PhoneEnabled || Model.FaxEnabled)
{
    <div class="card mb-3">
        <h3 class="card-header">@Loc["Account.YourContactInformation"]</h3>
        <div class="card-body d-flex flex-row row">
            @if (Model.PhoneEnabled)
            {
                <fieldset class="form-group col-12 col-sm-6">
                    <legend class="sr-only">@Loc["account.fields.phone"]</legend>
                    @if (Model.PhoneRequired)
                    {
                        <validation-provider tag="div" rules="required" name="Phone" v-slot="{ errors, classes }">
                            <label asp-for="Phone" class="col-form-label">@Loc["Account.Fields.Phone"]:</label>
                            <span class="required">*</span>
                            <input asp-for="Phone" v-bind:class="[classes , 'form-control']" v-model="customer.Phone"/>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="Phone"></span>
                        </validation-provider>
                    }
                    else
                    {
                        <label asp-for="Phone" class="col-form-label">@Loc["Account.Fields.Phone"]:</label>
                        <input asp-for="Phone" class="form-control"/>
                        <span asp-validation-for="Phone"></span>
                    }

                </fieldset>
            }
            @if (Model.FaxEnabled)
            {
                <fieldset class="form-group col-12 col-sm-6">
                    <legend class="sr-only">@Loc["account.fields.fax"]</legend>
                    @if (Model.FaxRequired)
                    {
                        <validation-provider tag="div" rules="required" name="Fax" v-slot="{ errors, classes }">
                            <label asp-for="Fax" class="col-form-label">@Loc["Account.Fields.Fax"]:</label>
                            <span class="required">*</span>
                            <input asp-for="Fax" v-bind:class="[classes , 'form-control']" v-model="customer.Fax"/>
                            <span class="field-validation-error">{{ errors[0] }}</span>
                            <span asp-validation-for="Fax"></span>
                        </validation-provider>
                    }
                    else
                    {
                        <label asp-for="Fax" class="col-form-label">@Loc["Account.Fields.Fax"]:</label>
                        <input asp-for="Fax" class="form-control"/>
                        <span asp-validation-for="Fax"></span>
                    }
                </fieldset>
            }
        </div>
    </div>
}

@if (Model.NewsletterEnabled || Model.CustomerAttributes.Any())
{
    <div class="card mb-3">
        <h3 class="card-header">
            @Loc["Account.Options"]
        </h3>
        <div class="card-body">
            <fieldset class="form-fields">
                <legend class="sr-only">@Loc["account.fields.newsletter"]</legend>
                @if (Model.NewsletterEnabled)
                {
                    <div class="form-group">
                        <label for="Newsletter" class="ml-1 custom-control custom-checkbox">
                            <input class="custom-control-input" asp-for="Newsletter" onchange="toggleNewsletterCat()"/>
                            <span class="custom-control-label">@Loc["account.fields.newsletter"]</span>
                            <span class="sr-only">@Loc["account.fields.newsletter"]</span>
                        </label>
                        <span asp-validation-for="Newsletter"></span>
                    </div>
                    <partial name="Partials/NewsLetterCategories" model="Model.NewsletterCategories"/>
                }

                @if (Model.CustomerAttributes.Any())
                {
                    <partial name="Partials/CustomerAttributes" model="Model.CustomerAttributes"/>
                }
            </fieldset>
        </div>
    </div>
}
@if (Model.NumberOfExternalAuthenticationProviders > 0)
{
    <div class="card mb-3">
        <h3 class="card-header">@Loc["Account.AssociatedExternalAuth"]</h3>
        <div class="card-body">
            @if (Model.AssociatedExternalAuthRecords.Count > 0)
            {
                //existing associated external records
                <div class="table-responsive">
                    <table class="table table-hover">
                        <colgroup>
                            <col/>
                            <col/>
                            <col/>
                        </colgroup>
                        <thead class="tab">
                        <tr>
                            <th class="auth-method-name">
                                @Loc["Account.AssociatedExternalAuth.AuthMethodName"]
                            </th>
                            <th class="email">
                                @Loc["Account.AssociatedExternalAuth.Email"]
                            </th>
                            <th class="external-id">
                                @Loc["Account.AssociatedExternalAuth.ExternalIdentifier"]
                            </th>
                            <th class="remove">
                                @Loc["Account.AssociatedExternalAuth.Remove"]
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach (var item in Model.AssociatedExternalAuthRecords)
                        {
                            <tr>
                                <td class="auth-method-name">
                                    @item.AuthMethodName
                                </td>
                                <td class="email">
                                    @item.Email
                                </td>
                                <td class="external-id">
                                    @CommonHelper.EnsureMaximumLength(item.ExternalIdentifier, 40, "...")
                                </td>
                                <td class="remove">
                                    <a href="#" onclick="removeexternalassociation('@item.Id')">@Loc["Account.AssociatedExternalAuth.Remove"]</a>
                                </td>
                            </tr>
                        }
                        </tbody>
                    </table>
                </div>
            }
            @if (Model.NumberOfExternalAuthenticationProviders > Model.AssociatedExternalAuthRecords.Count)
            {
                //we can add more external records
                <div class="form-fields add-more-external-records">
                    @Loc["Account.AssociatedExternalAuth.AddMoreRecords"] <a href="@Url.RouteUrl("Login", null, Context.Request.Scheme)">@Url.RouteUrl("Login", null, Context.Request.Scheme)</a>
                </div>
            }
        </div>
    </div>
}

@if (customerSettings.TwoFactorAuthenticationEnabled)
{
    <div class="card mb-3">
        <h3 class="card-header">@Loc["Account.TwoFactorAuth"]</h3>
        @if (Model.Is2faEnabled)
        {
            @Html.ActionLink(Loc["Account.TwoFactorAuth.Disable"], "DisableTwoFactorAuthenticator", "Account", new object(), new { @class = "btn btn-info login-button" })
        }
        else
        {
            @Html.ActionLink(Loc["Account.TwoFactorAuth.Enable"], "EnableTwoFactorAuthenticator", "Account", new object(), new { @class = "btn btn-info login-button" })
        }
    </div>
}
<div class="generalMarginSupporter">
    <input type="submit" value="@Loc["Common.Save"]" name="save-info-button" class="btn btn-info save-customer-info-button"/>
</div>
</form>
</validation-observer>
</div>
<script asp-location="Footer" asp-order="300">
    var customer = new Vue({
        data: () => ({
            @{
            <text>
                    FirstName: '@Html.Raw(Model.FirstName)',
                    LastName: '@Html.Raw(Model.LastName)',
                    Company: '@Html.Raw(Model.Company)',
                    StreetAddress: '@Html.Raw(Model.StreetAddress)',
                    StreetAddress2: '@Html.Raw(Model.StreetAddress2)',
                    ZipPostalCode: '@Html.Raw(Model.ZipPostalCode)',
                    City: '@Html.Raw(Model.City)',
                    CountryId: '@Model.CountryId',
                    StateProvinceId: '@Model.StateProvinceId',
                    Phone: '@Html.Raw(Model.Phone)',
                    Fax: '@Html.Raw(Model.Fax)',
                    Username: '@Html.Raw(Model.Username)',
                    Email: '@Html.Raw(Model.Email)',
                    @foreach (var item in Model.CustomerAttributes)
                    {
                        @switch (item.AttributeControlType)
                        {
                            case AttributeControlType.DropdownList:
                            {
                                @foreach (var itemValue in item.Values)
                                {
                                    if (itemValue.IsPreSelected)
                                    {
                                        <text>customer_attribute_</text>
                                        @item.Id
                                        <text>: '@itemValue.Id',</text>
                                        break;
                                    }

                                    @:customer_attribute_ @item.Id : '',
                                }
                            }
                                break;
                            case AttributeControlType.Checkboxes:
                            case AttributeControlType.RadioList:
                            case AttributeControlType.ReadonlyCheckboxes:
                            {
                                <text>customer_attribute_</text>
                                @item.Id
                                <text>: [
                                        @foreach (var itemValue in item.Values)
                                        {
                                            if (itemValue.IsPreSelected)
                                            {
                                                <text>'@itemValue.Id',</text>
                                            }
                                        }
                                    ],</text>
                            }
                                break;
                            case AttributeControlType.TextBox:
                            case AttributeControlType.MultilineTextbox:
                            {
                                <text>customer_attribute_</text>
                                @item.Id
                                <text>: @if (item.DefaultValue != null)
                                        {
                                            <text>'@item.DefaultValue'</text>
                                        }
                                        else
                                        {
                                            <text>''</text>
                                        },</text>
                            }
                                break;
                        }
                    }
                </text>}
        }),
        created() {
            document.addEventListener("DOMContentLoaded", function () {
                document.querySelectorAll("[data-checked='true']").forEach(function (element) {
                    element.checked = true;
                })
            });
        }
    });
    function removeexternalassociation(itemId) {
        if (confirm('@Loc["Common.AreYouSure"]')) {
            var bodyFormData = new FormData();
            bodyFormData.append('Id', itemId);
            bodyFormData.append('__RequestVerificationToken', document.querySelector('input[name=__RequestVerificationToken]').value);
            axios({
                method: 'POST',
                url: '@Url.Action("RemoveExternalAssociation", "Account")',
                data: bodyFormData,
            }).then(function (response) {
                location = response.data.redirect;
            }).catch(function (error) {
                alert(error);
            })
        }
        return false;
    }
</script>